import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Popconfirm, message } from 'antd';
import { useRef,useState } from 'react';

import { queryList, addUpdate,  OperationAppointmentParams, OperationAppointmentItem } from '@/services/operation/appointment';
import OperationAppointmentForm from './appointmentForm';

export default () => {
    const [open, setOpen] = useState<boolean>(false);
    const [operationAppointmentItem, setOperationAppointmentItem] = useState<Partial<OperationAppointmentItem> | undefined>();
    const actionRef = useRef<ActionType>();

    /**
     * 添加编辑预约
     * @param fields
    */
    const handleSubmit = async (fields: OperationAppointmentItem) => {
        setOpen(false);
        const msg = fields.id ? '编辑' : '添加';
        message.loading('正在' + msg + '预约');
        const res = await addUpdate({ ...fields });

        if (res.success) {
            message.success(msg + '预约成功');
            if (actionRef.current) {
                actionRef.current.reload();
            }
        } else {
            message.error(res.msg);
        }
    };

    const showAddModal = () => {
        setOpen(true);
        setOperationAppointmentItem({});
    };

    const showEditModal = (item: OperationAppointmentItem) => {
        setOpen(true);
        setOperationAppointmentItem(item);
    };

    const columns: ProColumns<OperationAppointmentItem>[] = [
        {
            title: '预约日期',
            dataIndex: 'appointDate',
            hideInSearch: true,
            width: 90
        },
        {
            title: '预约日期',
            dataIndex: 'appointDate',
            valueType: 'dateRange',
            hideInTable: true,
            search: {
                transform: (value: any) => ({
                    startDate: value[0],
                    endDate: value[1],
                }),
            },
          },
        {
            title: '手机号',
            dataIndex: 'mobile',
            width: 120,
        },
        {
            title: '预约时间',
            dataIndex: 'appointTime',
            hideInSearch: true,
            width: 150,
        },
        {
            title: '预约状态',
            dataIndex: 'status',
            valueType: 'select',
            width: 80,
            valueEnum: {
              '1': {
                text: '预约中',
                status: 'Processing',
              },
              '2': {
                text: '已到店',
                status: 'Success',
              },
              '3': {
                text: '已取消',
                status: 'Error',
              },
              '4': {
                text: '已过期',
                status: 'Error',
              },
            },
        },
        {
            title: '预约项目',
            dataIndex: 'appointItem',
            hideInSearch: true,
        },
        {
            title: '姓氏',
            dataIndex: 'firstName',
            hideInSearch: true,
            width: 100
        },
        {
            title: '性别',
            dataIndex: 'gender',
            valueType: 'select',
            hideInSearch: true,
            width: 60,
            valueEnum: {
              'F': {
                text: '女',
              },
              'M': {
                text: '男',
              },
            },
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: 60,
            render: (_, record) => (
              <>
                <a
                    key="edit"
                    onClick={() => {
                        showEditModal({ ...record})
                    }}
                    title="编辑预约"
                >
                编辑
                </a>
              </>
            ),
        },
    ];

    return (
        <PageContainer title={false}>
            <ProTable<OperationAppointmentItem>
                rowKey="id"
                actionRef={actionRef}
                columns={columns}
                request={(params) => {
                    params.keyword
                    return queryList(params as OperationAppointmentParams);
                }}
                toolBarRender={() => [
                    <Button icon={<PlusOutlined />}
                        onClick={() => {
                            showAddModal();
                        }}
                        title="添加预约"
                        type="primary">预约
                    </Button>
                ]}
                pagination={{
                    pageSize: 10
                }}    
            />
            <OperationAppointmentForm
                operationAppointmentItem={operationAppointmentItem}
                open={open}
                onCancel={() => setOpen(false)}
                onSubmit={handleSubmit}
            />
        </PageContainer>
    );
};